<!doctype html>
<html>
<head>
  <title>Vue Grid Demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <br/>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-offset-10 col-sm-1">
        <button id='deletebutton' class="btn btn-outline btn-block btn-warning save" style="width:90px">Delete</button>
      </div>
      <div class="col-sm-1">
        <button id='addnew' class="btn btn-outline btn-block btn-success save" style="width:80px">+</button>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <h3 class="page-header text-center">
        Data Grid Example
        <small>(Vue Grid)</small>
      </h3>
    </div>
  </div>

  <div class="row">
    <!--
          <div class="col-sm-1">
              <button id='deletebutton' class="btn btn-outline btn-block btn-warning save">Delete</button>
          </div>
          -->
    <div class="col-sm-offset-7 col-sm-3">
      <!--
              <label for="search-query"></label>
              <input type="text" id="search-query" v-model="searchQuery" class="form-control" placeholder="Search..." style="width: 200px">
              -->
      <input type="text" id="search-query" v-model="searchQuery" class="form-control" placeholder="Search...">
    </div>
    <div class="col-sm-2">
      <button id='submitbutton' class="btn btn-outline btn-block btn-success save">Advanced</button>
    </div>
    <!--
          <div class="col-sm-1">
              <button id='addnew' class="btn btn-outline btn-block btn-success save">+</button>
          </div>
          -->
  </div>
  <div class="row">
    <div class="col-md-12">
      <br/>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <grid rows="{{items1}}" columns="{{columns1}}" filter-key="{{searchQuery}}" per-page="5" id="my-table"></grid>
      <pagination id="my-table" class="pull-right" align="right"></pagination>
    </div>
    <!--
        <div class="col-md-12" aligh="right">
            <pagination id="my-table" class="pull-right" align="right"></pagination>
        </div>
        -->
  </div>

  <div class="row">
    <div class="col-md-12">
      <hr>
    </div>
  </div>

  <div class="row">
    <grid rows="{{gridData2}}" columns="{{gridColumns2}}" per-page="10" id="another-table"></grid>
    <pagination id="another-table"></pagination>
  </div>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="vue-grid.js"></script>
<script>

  var vm = new Vue({
    el: 'body',
    data: function () {
      return {
        searchQuery: '',
        columns1: ['name', 'age'],
        items1: [
          {name: 'Barack Obama', age: 53},
          {name: 'Some Dude', age: 24},
          {name: 'Tv Dude', age: 28},
          {name: 'Ice Dude', age: 34},
          {name: 'Mel Dude', age: 25},
          {name: 'Word Dude', age: 29},
          {name: 'Even Dude', age: 44},
          {name: 'More Dude', age: 54},
          {name: 'Thor Dude', age: 29},
          {name: 'Noel Dude', age: 26},
          {name: 'Tiffany Dude', age: 14},
          {name: 'Miranda Dude', age: 28},
          {name: 'Jeff Dude', age: 23},
          {name: 'Jack Dude', age: 54},
          {name: 'Jimmy Dude', age: 44},
          {name: 'Jon Dude', age: 34},
          {name: 'Another Dude', age: 34}
        ],
        gridColumns2: ['name'],
        gridData2: [
          {
            name: 'Aaron'
          },
          {
            name: 'Abdiel'
          },
          {
            name: 'Abdul'
          },
          {
            name: 'Abdullah'
          },
          {
            name: 'Abe'
          },
          {
            name: 'Abel'
          },
          {
            name: 'Abelardo'
          },
          {
            name: 'Abner'
          },
          {
            name: 'Abraham'
          },
          {
            name: 'Adalberto'
          },
          {
            name: 'Adam'
          },
          {
            name: 'Adan'
          },
          {
            name: 'Adelbert'
          },
          {
            name: 'Adolf'
          },
          {
            name: 'Adolfo'
          },
          {
            name: 'Adolph'
          },
          {
            name: 'Adolphus'
          },
          {
            name: 'Adonis'
          },
          {
            name: 'Adrain'
          },
          {
            name: 'Adrian'
          },
          {
            name: 'Adriel'
          },
          {
            name: 'Adrien'
          },
          {
            name: 'Afton'
          },
          {
            name: 'Agustin'
          },
          {
            name: 'Ahmad'
          },
          {
            name: 'Ahmed'
          },
          {
            name: 'Aidan'
          },
          {
            name: 'Aiden'
          },
          {
            name: 'Akeem'
          },
          {
            name: 'Al'
          },
          {
            name: 'Alan'
          },
          {
            name: 'Albert'
          },
          {
            name: 'Alberto'
          },
          {
            name: 'Albin'
          },
          {
            name: 'Alden'
          },
          {
            name: 'Alec'
          },
          {
            name: 'Alejandrin'
          }
        ]
      };
    }
  });

</script>
</body>
</html>
